<!DOCTYPE html>
<html lang="zh-hans">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <!-- Framework7 -->
    <link rel="stylesheet" href="style/css/framework7.min.css">
    <!-- custom app styles-->
    <link rel="stylesheet" href="style/css/font.css">
    <link rel="stylesheet" href="style/css/my-app.css">

</head>

<body>
    <!-- 全屏模式悬浮层 -->
    <div class="statusbar-overlay"></div>
    <!-- 左边栏悬浮层 -->
    <div class="panel-overlay"></div>
    <!-- 左边栏offcanvas-->
    <div class="panel panel-left panel-reveal">
        <div class="content-block">
            <p>这是左滑动栏</p>
        </div>
    </div>
    <!-- Views-->
    <div class="views">
        <!-- Your main view, should have "view-main" class-->
        <div class="view view-main">
            <!-- Top Navbar-->
            <div class="navbar">
                <div class="navbar-inner">
                    <div class="left">
                        <a href="#" class="link"> <i class="icon-left-open-big"></i>
                            <span>返回</span>
                        </a>
                    </div>
                    <!-- We have home navbar without left link-->
                    <div class="center sliding">Eyas Life</div>
                </div>
            </div>
            <!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
            <div class="pages navbar-through toolbar-through">
                <!-- Page, data-page contains page name-->
                <div class="page">
                    <!-- Scrollable page content-->
                    <div class="page-content single-content">
                        <!-- Default pull to refresh layer-->
                        <!-- Add ".content-block-title" to add block's title -->
                        <div class="content-block-title">Angular学习笔记——开始</div>
                        <div class="content-block attrs">
                            <div class="attr"><i class="icon-clock"></i>
                                <span>2014-11-20</span>
                            </div>
                            <div class="attr"><i class="icon-edit-modify-streamline"></i>
                                <span>前端、html</span>
                            </div>
                            <div class="attr"><i class="icon-tag"></i>
                                <span>angular、app、开发</span>
                            </div>


                        </div>
                        <div class="content-block">
                            <div class="text content-block-inner">
                                <p>Angular是啥？这里有<a href="http://baike.baidu.com/view/9604951.htm" target="_blank">百度百科</a> ，百度百科够全面了。简单介绍下，就是一个专门用来构建网页应用的js框架，俗称webapp框架。</p>
                                <p>Angular官网：<a href="http://angularjs.org/">http://angularjs.org/</a> (被xx，你懂的)</p>
                                <p>Angular文档：<a href="http://www.ngnice.com/docs/api">http://www.ngnice.com/docs/api</a>
                                </p>
                                <p>Angular Github：<a href="https://github.com/angular/angular">https://github.com/angular/angular</a>
                                </p>
                                <p>&nbsp;</p>
                                <h2>安装</h2>
                                <p>首先下载，有时候真不知去哪下载，github里面的都是些什么东西呢。好吧，现在有个现成的，点击这里下载：<a href="http://eyaslife.com/wp-content/uploads/2014/10/angular-1.3.0.14.zip">angular-1.3.0.14</a>
                                </p>
                                <p>引入包里的angular.min.js文件</p>
                                <pre>&lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
</pre>
                                <p>也可以使用cdn</p>
                                <pre>&lt;script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.js"&gt;&lt;/script&gt;
</pre>
                                <p>这样子就安装好了。</p>
                                <h2>第一个Angular应用</h2>
                                <p>我们来建第一个angular程序，代码如下：</p>
                                <pre>&lt;!Doctype html&gt;
&lt;html ng-app&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;Angular JS&lt;/title&gt;
        &lt;script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.8/angular.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;input type="text" ng-model="name"&gt;
        &lt;p&gt;Hello,{{name}}&lt;/p&gt;
    &lt;/body&gt;
&lt;/html&gt;
</pre>
                                <p>然后打开浏览器试试。在输入框输入一些东西，下面会实时显示输入的内容。好酷。</p>
                                <p>
                                    <a href="http://eyaslife.com/wp-content/uploads/2014/10/9110e45bd21b5216771a566b1497e4e6.png">
                                        <img class="alignnone size-full wp-image-362" src="http://eyaslife.com/wp-content/uploads/2014/10/9110e45bd21b5216771a566b1497e4e6.png" alt="QQ截图20141030113915" width="453" height="174" />
                                    </a>
                                </p>
                                <p>我们来看看以上的程序，当应用被浏览器加载时，标记有
                                    <code>ng-app</code>的区域将会被AngularJS解析并引导应用。这里我放在整个 html 标签上表示整个页面都是交给AngularJs解析。</p>
                                <p>然后是 input 有一个
                                    <code>ng-model</code>表示input绑定一个数据模型 name ，即给name赋值，然后下面使用 {{name}} 显示name的值，
                                    <code>{{}}</code>是AngularJs用户模板输出值的标识符。</p>
                            </div>

                        </div>

                        <!-- Preloader -->
                        <div class="infinite-scroll-preloader">
                            <div class="preloader"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 底部导航-->
            <div class="toolbar tabbar">
                <div class="toolbar-inner">
                    <a href="#tab1" class="tab-link active">
                        <i class="icon-home-house-streamline"></i>
                    </a>
                    <a href="#tab3" class="tab-link">
                        <i class="icon-email-mail-streamline"></i>
                    </a>
                    <a href="#tab4" class="tab-link">
                        <i class="icon-logout"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- Path to Framework7 Library JS-->
    <script type="text/javascript" src="style/js/framework7.min.js"></script>
    <!-- Path to your app js-->
    <script type="text/javascript" src="style/js/my-app.js"></script>
</body>

</html>
